<style scoped lang="less">
  .hide {
    display: none;
  }

  .show-customers-wrap {
    position: fixed;
    top: 10vh;
    left: 2vw;
  }

  .customer {
    top: 4vh;
    display: flex;
    align-items: center;
  }

  .customer-img {
    width: 4vh;
    height: 4vh;
    border-radius: 50%;
    margin-right: 1vh;
  }

  .show-customers {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 5vh;
    color: white;
    background-color: rgba(0, 0, 0, 0.62);
    border-radius: 5vh;
    padding: 0 1vh;
    opacity: 0;
  }

  .wrap-showNext {
    animation: show 5s forwards;
  }

  .showNext-text {
    position: relative;
    top: 1vh;
    font-size: 0.35rem;
    animation: showText 5s forwards;
  }


  @keyframes show {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes showText {
    0% {
      top: 4vh;
      opacity: 0;
    }
    20% {
      top: 0;
      opacity: 1;
    }
    80% {
      top: 0;
      opacity: 1;
    }
    100% {
      top: 0;
      opacity: 0;
    }
  }
</style>
<template>
  <div class="show-customers-wrap" v-if="laseBuyUserData!=null&&showCustomerindex>=0">
			<span :class="customerChange" class="show-customers">
				<div class="customer" :class="customerTextChange">
					<img class="customer-img" :src="laseBuyUserData[showCustomerindex].head_img">
					<span>
            {{laseBuyUserData[showCustomerindex].nickname+'送了'+laseBuyUserData[showCustomerindex].gift_name+'给'+
            laseBuyUserData[showCustomerindex].player_name+'加'+laseBuyUserData[showCustomerindex].vote_num+'票'}}</span>
				</div>
			</span>
  </div>
</template>
<script>
  import { getGiftList } from '@/api/play'
  import { getActiveId } from '@/libs/util'

  export default {
    name: 'gift-buy-last',
    data () {
      return {
        aid: null,
        laseBuyUserData: [],
        showCustomerindex: -1,
        timeShowCustomer: null,
        mainData:null,
        customerChange: '',
        customerTextChange: '',
      }
    },
    created () {
      this.aid = getActiveId()
      this.mainData = this.GLOBAL.getMainData()
      if(this.mainData.gift.show_gift_record ===this.GLOBAL.giftConst.GIFT_SHOW_GIFT_RECORD_REAL_TIME){
        this.getData();
      }
    },
    methods: {
      getData () {
        getGiftList(this.aid, null,1,20).then(rep => {
          this.laseBuyUserData.push(...rep.data.data.list)
          if(this.laseBuyUserData.length>0){
            this.startShowCustomer();
          }
        })
      },
      startShowCustomer() {
        let vm = this;
        if (vm.laseBuyUserData === null) {
          return;
        }
        this.$nextTick(v => {
          vm.timeShowCustomer = setInterval(vm.changeCustomer, 6200);
        })
      },
      changeCustomer() {
        this.customerChange = 'hide';
        this.customerTextChange = 'hide';
        if ((this.showCustomerindex + 1) >= this.laseBuyUserData.length) {
          this.showCustomerindex = 0;
        } else {
          this.showCustomerindex++;
        }
        setTimeout(() => {
          this.customerChange = 'wrap-showNext';
          this.customerTextChange = 'showNext-text';
        }, 1000);

      },
    },
    beforeDestroy() {
      if (this.timeShowCustomer != null)
        clearInterval(this.timeShowCustomer);
    },
  }
</script>
